/*
 * @Author: 何善万 swhe@che300.com
 * @Date: 2023-11-06 10:34:55
 * @LastEditors: 何善万 swhe@che300.com
 * @LastEditTime: 2024-10-23 13:36:07
 * @FilePath: \my-notion-redux\src\routers.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component } from "react";
import classNames from "classnames";
import { useSelector } from "react-redux";
import { useTranslation } from "react-i18next";
import projects from "../json/projects";
import {isMobile, isShrinkPage} from '@tools/utils'
import company_log from '@assets/wanmi.png'
import * as styles from "../styles/job_section_5.less";

function JobSection5() {
  const { t } = useTranslation();
  const { language } = useSelector((state) => state.global);
  const project_info = projects()[1];
  return (
    <div className={classNames(styles.job_section, "section", isMobile() && language === 'en' ? styles.mobile_en_content : '')}>
      <div 
        className={styles.bottom_section}
         style={isShrinkPage(820)}
      >
        <div className={styles.left_section}>
          <img src={company_log} className={styles.company_log} alt="" />
        </div>
        <div className={styles.right_section}>
            <h3>{project_info.title}</h3>
            <p>
              <span>{t("tech_stack")}：</span>
              {project_info.tech}
            </p>
            <p>
              <span>{t("function_description")}：</span>
              {project_info.content}
            </p>
            <div>
              <span>{t("responsibility")}：</span>
              {project_info.works.map((item, index) => {
                return <p key={index}>{item.work}</p>;
              })}
            </div>
            <div>
              <span>{t("gain")}：</span>
              {project_info.gains.map((item, index) => {
                return <p key={index}>{item.gain}</p>;
              })}
            </div>
        </div>
     
      </div>
    </div>
  );
}

export default JobSection5;
